<template>
	<div class="icons">
			<swiper :options="swiperOption">
				<swiper-slide 
				v-for="(page,index) of pages"
				:key="index"
				>
					<div v-for="item of page" class="icon-item" :key="item.id">
						<div class="icon-img">
							<img :src="item.imgUrl" class="icon-img-content">
							<p v-text="item.desc"></p>
						</div>
					</div>
				</swiper-slide>
			</swiper>
	</div>
</template>

<script>
export default {
	name: 'homeIcon',
	props:{
		list:Array
	},
	data () {
		return {
			swiperOption:{
				autoplay:false
			}
		}
	},
	computed:{
		pages () {
			const pages = []
			this.list.forEach((item,index) => {
				const page = Math.floor(index/8)
				if (!pages[page]) {
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>

<style lang="stylus" scoped>
	.icons
		overflow hidden
		height 0
		padding-bottom 50%
		width 100%
		margin-top .1rem
		.icon-item
			position relative
			width 25%
			padding-bottom 25%
			overflow hidden
			float left
			.icon-img
				position absolute
				top 0
				right 0
				left 0
				bottom .44rem
				text-align center
				white-space nowrap
				.icon-img-content
					height 100%
</style>
